<!DOCTYPE html>
<html>
    <meta charset="UTF-8">
    <title>演示租户</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet"
        href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script
        src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <body>
        <div>
            <!-- 导航栏 -->
            <div class="header" style="width: 100%;">
                <nav class="navbar navbar-default navbar-fixed-top"
                    role="navigation">
                    <div class="navbar-header" style="margin-left:
                        0px;padding-right: -100;padding-left: 35px;padding-top:
                        15px;">
                        <span style="color: #eaeff4;">贵州省民政厅</span>
                        <p style="font-size: 10px; color: #eaeff4;">DEPARTMENT
                            OF CIVIL AFFAIRS OF GUIZHOU PROVINCE</p>
                    </div>
                    <div class="collapse navbar-collapse"
                        id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active">
                                <div style="margin-left: 20px;">
                                    <button class="dropbtn" style="background:
                                        #3e4edd;">首页</button>
                                </div>
                            </li>
                            <li>
                                <div class="dropdown">
                                    <button class="dropbtn">业务图谱</button>
                                    <div class="dropdown-content">
                                        <a href="#">图谱可视化</a>
                                        <a href="#">本体管理</a>
                                        <a href="#">实体管理</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="dropdown">
                                    <button class="dropbtn">民政智库</button>
                                    <div class="dropdown-content">
                                        <a href="#">文件管理</a>
                                        <a href="#">知识检索</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="dropdown">
                                    <button class="dropbtn">数据管理</button>
                                    <div class="dropdown-content">
                                        <a href="#">元数据管理</a>
                                        <a href="#">主数据管理</a>
                                        <a href="#">安全中心</a>
                                        <a href="#">数据治理</a>
                                        <a href="#">多维分析</a>
                                        <a href="#">任务调度</a>
                                        <a href="#">数据集成</a>
                                        <a href="#">智能标注</a>
                                        <a href="#">实时流分析</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="dropdown">
                                    <button class="dropbtn">...</button>
                                    <div class="dropdown-content">
                                        <div style="display: flex;
                                            flex-direction: row;
                                            justify-content:flex-start; width:
                                            240px;">
                                            <div>
                                                <button class="self-button">数据超市</button>
                                            </div>
                                            <div class="dropright-content">
                                                <a href="#">元数据管理</a>
                                                <a href="#">主数据管理</a>
                                            </div>
                                        </div>
                                        <button class="self-button">领导驾驶舱</button>
                                        <button class="self-button">服务与支持</button>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <div style="margin-left: 20px;">
                                    <button class="dropbtn"
                                        style="font-size:14px;">欢迎您，user</button>
                                </div>
                            </li>
                            <li>
                                <a class="self-icon" style="padding-bottom:
                                    24px;
                                    padding-top: 20px;">
                                    <span class="glyphicon glyphicon-bell"
                                        style="color:
                                        blanchedalmond;"></span>
                                </a>
                            </li>
                            <li>
                                <a class="self-icon" style="padding-bottom:
                                    24px;
                                    padding-top: 20px;">
                                    <span class="glyphicon glyphicon-cog"
                                        style="color:
                                        blanchedalmond;"></span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
            <div class="middle">
                <!-- 轮播图 -->
                <div style="position:relative;width: 100%;">
                    <div style="position:absolute;left:0;top:0;z-index: -1;width:
                    100%;margin-top: 13px;display: flex;">
                        <div style="display: inline;">
                            <img id="firstImg" alt="" src="img/firstImg.jpg"
                                style="height: 600px; transform: translateX(-400px) scale(1);" />
                        </div>
                        <div style="display: inline; ">
                            <img id="secondImg" alt="" src="img/second.png"
                                style="height: 600px; transform: translateX(0px) scale(1);" />
                        </div>
                    </div>
                    <div style="width: 100%; height: 620px;">
                        <div class="self-div">
                            <h5 style="font-size: 25px; color: #FFFFFF;">演示租户</h5>
                            <h2 style="margin-top: 0px; font-size: 40px; color:
                                #FFFFFF;">政务业务数据管理平台</h2>
                            <span style="float: left;height: 50px;"><input
                                    style="width: 640px;height: 50px; font-size:
                                    20px; outline:none;margin-top: 20px;"
                                    placeholder="输入关键字搜索"></span>
                            <span><button style="background: #4862fe;
                                    text-align:center;
                                    font-size: 20px;
                                    color: #fff;
                                    width: 100px;
                                    height: 50px;
                                    margin-top: 20px;
                                    border:none">搜索</button></span>
                            <ul style="position: absolute;
                                text-align: center;
                                display:flex;
                                margin-top: 10px;">
                                <li class="self-li" style="text-align: center;">
                                    <span>社会救助处</span>
                                    <img src="img/fire.png" style="height: 16px;
                                        width: 16px;">
                                </li>
                                <li class="self-li" style="text-align: center;">
                                    <span>儿童福利处</span>
                                </li>
                                <li class="self-li">
                                    <span>社会组织管理局</span>
                                </li>
                                <li class="self-li">
                                    <span>社会事务处</span>
                                </li>
                                <li class="self-li">
                                    <span>规划财务处</span>
                                </li>
                            </ul>
                        </div>
                        <div class="out-transboxs">
                            <div class="transbox">
                                <span class="self-span">1076</span>
                                <h5 class="self-h5">收集知识、政策文件</h5>
                            </div>
                            <div class="transbox">
                                <span class="self-span">1</span>
                                <h5 class="self-h5">开放API</h5>
                            </div>
                            <div class="transbox">
                                <span class="self-span">1980</span>
                                <h5 class="self-h5">业务实体</h5>
                            </div>
                            <div class="transbox">
                                <span class="self-span">2277</span>
                                <h5 class="self-h5">业务实体关系数</h5>
                            </div>
                            <div class="transbox">
                                <span class="self-span">14</span>
                                <h5 class="self-h5">知识图谱</h5>
                            </div>
                        </div>
                        <div style="height: 2px;width: 100%;
                        display: flex;
                        cursor: pointer;
                        margin-top: 280px;
                        flex-direction: row;
                        justify-content: center;
                        text-align: center;">
                            <li style="display: inline;line-height: 2px;width: 3%; " >
                                <div style="
                                width: 35px;
                                height: 2px;
                                background-color: hsla(0,0%,100%,.4);
                                " id="showFirst" onmouseover = "funa()">
                                </div>
                            </li>
                            <li style="display: inline;line-height: 2px;width: 1%; ">
                                <div style="
                                width: 35px;
                                height: 2px;
                                background-color: hsla(0,0%,100%,.4);
                                "  id="showSecond" onmouseover = "func()">
                                </div>
                            </li>
                        </div>
                    </div>
                </div>

                <!-- 词云 -->
                <div style="height: 410px; width: 100%; display:
                    flex;background-color: #F3F8FB;">
                    <div style="width: 55%; height: 410px;">
                        <img src="img/wordCloud.png" style="height: 410px;">
                    </div>
                    <div style="width: 40%;height: 410px;padding-top: 40px;">
                        <div style="width: 100%; height: 50px;display: inline;">
                            <h5 style="font-size: 20px;margin-left: 20px;
                                display: inline;border-bottom: 2px solid
                                #0073E8;padding-bottom: 10px;" id="firstTab">最新政策</h5>
                            <h5 style="font-size: 20px;margin-left: 20px;
                                display: inline;padding-bottom: 10px;"
                                id="secondTab">智库热榜</h5>
                            <hr style="background-color: darkgrey;margin-top:
                                10px;" />
                        </div>
                        <div>
                            <ul style="padding-left: 0px;
                                cursor:pointer;" id="firstUl">
                                <li style="margin-top: 10px;
                                    margin-bottom: 10px;">
                                    <span style="font-size: 16px;width: 80%;">国常会：加强县城商业体系建设
                                        发展新型农村便利店... </span>
                                    <span style="font-size: 16px;float:
                                        right;width: 17%;">2021-04-28</span>
                                </li>
                                <li style="margin-top: 10px;
                                    margin-bottom: 10px;">
                                    <span style="font-size: 16px; width: 80%;">省教育厅办公室关于公布2021年省级教师培训项目承...
                                    </span>
                                    <span style="font-size: 16px;float: right;
                                        width: 17%;">2021-04-28</span>
                                </li>
                                <li style="margin-top: 10px;
                                    margin-bottom: 10px;">
                                    <span style="font-size: 16px; width: 80%;">国家医保局：建立健全医保门诊共济保障机制
                                        在国新... </span>
                                    <span style="font-size: 16px;float: right;
                                        width: 17%;">2021-04-28</span>
                                </li>
                                <li style="margin-top: 10px;
                                    margin-bottom: 10px;">
                                    <span style="font-size: 16px; width: 80%;">国家医保局：建立健全医保门诊共济保障机制
                                        在国新... </span>
                                    <span style="font-size: 16px;float: right;
                                        width: 17%;">2021-04-28</span>
                                </li>
                                <li style="margin-top: 10px;
                                    margin-bottom: 10px;">
                                    <span style="font-size: 16px; width: 80%;">国家医保局：建立健全医保门诊共济保障机制
                                        在国新... </span>
                                    <span style="font-size: 16px;float: right;
                                        width: 17%;">2021-04-28</span>
                                </li>
                                <li style="margin-top: 10px;
                                    margin-bottom: 10px;">
                                    <span style="font-size: 16px; width: 80%;">国家医保局：建立健全医保门诊共济保障机制
                                        在国新... </span>
                                    <span style="font-size: 16px;float: right;
                                        width: 17%;">2021-04-28</span>
                                </li>
                                <li style="margin-top: 10px;
                                    margin-bottom: 10px;">
                                    <span style="font-size: 16px; width: 80%;">国家医保局：建立健全医保门诊共济保障机制
                                        在国新... </span>
                                    <span style="font-size: 16px;float: right;
                                        width: 17%;">2021-04-28</span>
                                </li>
                                <li style="margin-top: 10px;
                                    margin-bottom: 10px;">
                                    <span style="font-size: 16px; width: 80%;">国家医保局：建立健全医保门诊共济保障机制
                                        在国新... </span>
                                    <span style="font-size: 16px;float: right;
                                        width: 17%;">2021-04-28</span>
                                </li>
                            </ul>
                            <ul id="secondUl" style="padding-left: 0px;
                                display: none;">
                                <li style="margin-top: 10px;
                                    margin-bottom: 10px;">
                                    <span style="font-size:
                                        16px;cursor:pointer;">国常会：第二个 2021-04-28</span>
                                </li>
                                <li style="margin-top: 10px;
                                    margin-bottom: 10px;">
                                    <span style="font-size:
                                        16px;cursor:pointer;">省教育厅办公室关于公布2021年省级教师培训项目承...
                                    </span>
                                    <span style="font-size: 16px;float: right;">2021-04-28</span>
                                </li>
                                <li style="margin-top: 10px;
                                    margin-bottom: 10px;">
                                    <span style="font-size:
                                        16px;cursor:pointer;">国家医保局：建立健全医保门诊共济保障机制
                                        在国新... </span>
                                    <span style="font-size: 16px;float: right;">2021-04-28</span>
                                </li>
                                <li style="margin-top: 10px;
                                    margin-bottom: 10px;">
                                    <span style="font-size:
                                        16px;cursor:pointer;">国家医保局：建立健全医保门诊共济保障机制
                                        在国新... </span>
                                    <span style="font-size: 16px;float: right;">2021-04-28</span>
                                </li>
                                <li style="margin-top: 10px;
                                    margin-bottom: 10px;">
                                    <span style="font-size:
                                        16px;cursor:pointer;">国家医保局：建立健全医保门诊共济保障机制
                                        在国新... </span>
                                    <span style="font-size: 16px;float: right;">2021-04-28</span>
                                </li>
                                <li style="margin-top: 10px;
                                    margin-bottom: 10px;">
                                    <span style="font-size:
                                        16px;cursor:pointer;">国家医保局：建立健全医保门诊共济保障机制
                                        在国新... </span>
                                    <span style="font-size: 16px;float: right;">2021-04-28</span>
                                </li>
                                <li style="margin-top: 10px;
                                    margin-bottom: 10px;">
                                    <span style="font-size:
                                        16px;cursor:pointer;">国家医保局：建立健全医保门诊共济保障机制
                                        在国新... </span>
                                    <span style="font-size: 16px;float: right;">2021-04-28</span>
                                </li>
                                <li style="margin-top: 10px;
                                    margin-bottom: 10px;">
                                    <span style="font-size:
                                        16px;cursor:pointer;">国家医保局：建立健全医保门诊共济保障机制
                                        在国新... </span>
                                    <span style="font-size: 16px;float: right;">2021-04-28</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 平台能力 -->
                <div style="height: 534px; width: 100%;">
                    <div style="width: 100%;">
                        <h3 style="text-align: center; font-size: 25px;"><strong>平台能力</strong></h3>
                        <hr class="self-h3" />
                    </div>
                    <div>
                        <ul style="text-align: center;cursor:pointer;">
                            <li style="display: inline; font-size: 20px;
                                margin-right: 25px;">
                                <span style="color: #1C4EFF;">知识中台能力</span>
                            </li>
                            <li style="display: inline;font-size: 20px;
                                margin-right: 25px;">
                                <span>数据治理能力</span>
                            </li>
                            <li style="display: inline;font-size: 20px;
                                margin-right: 25px;">
                                <span>数据应用能力</span>
                            </li>
                        </ul>
                    </div>
                    <div class="wrapper">
                        <ul>
                            <li>
                                <div class="li-div">
                                    <div class="circle"></div>
                                    <div style="position: absolute;left:
                                        90px;top: 50px;">
                                        <img src="img/u1.png" style="width:
                                            37px;height: 37px;">
                                    </div>
                                    <div>
                                        <p class="li-p1"><strong>图谱管理</strong></p>
                                        <p class="li-p2">通过图谱技术，融合海量多源异构知识，提供精准高效的检索、问答、推荐等一站式智能应用</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="li-div">
                                    <div class="circle"></div>
                                    <div style="position: absolute;left:
                                        90px;top: 50px;"><img src="img/u2.png"
                                            style="width: 37px;height: 37px;"></div>
                                    <div>
                                        <p class="li-p1"><strong>文档智能</strong></p>
                                        <p class="li-p2">能够与知识体系搭建系统实现数据共享，能够与知识库系统进行对接，实现数据自动载入标注平台</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="li-div">
                                    <div class="circle"></div>
                                    <div style="position: absolute;left:
                                        90px;top: 50px;"><img src="img/u3.png"
                                            style="width: 37px;height: 37px;"></div>
                                    <div>
                                        <p class="li-p1"><strong>收集器管理</strong></p>
                                        <p class="li-p2">能够实现结构化数据本体抽取、实体融合，构建结构化知识图谱融合。同时支持对数据源管理、数据加工等功能</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="li-div">
                                    <div class="circle"></div>
                                    <div style="position: absolute;left:
                                        90px;top: 50px;"><img src="img/u4.png"
                                            style="width: 37px;height: 37px;"></div>
                                    <div>
                                        <p class="li-p1"><strong>指标库</strong></p>
                                        <p class="li-p2">对平台的原生指标、派生指标、组合指标进行统一规范管理，在数据融通基础上提供指标模型，构建服务业务的指标支撑体系</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="li-div">
                                    <div class="circle"></div>
                                    <div style="position: absolute;left:
                                        90px;top: 50px;"><img src="img/u5.png"
                                            style="width: 37px;height: 37px;"></div>
                                    <div>
                                        <p class="li-p1"><strong>标签库</strong></p>
                                        <p class="li-p2">对全平台标签进行规范管理，可通过标签查询被标注主体的各类信息，通过标签对数据进行分类标注、特征描述</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <ul style="text-align: center;display: flex; margin-top:
                            30px; display: none;">
                            <li>
                                <div class="li-div">
                                    <div class="circle"></div>
                                    <div style="position: absolute;left:
                                        90px;top: 50px;">
                                        <img src="img/u1.png" style="width:
                                            37px;height: 37px;">
                                    </div>
                                    <div>
                                        <p class="li-p1"><strong>主数据</strong></p>
                                        <p class="li-p2">满足跨部门业务协同需要的、反映核心业务实体状态属性的企业（组织机构）基础信息，部分主数据支持对外开放调用</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="li-div">
                                    <div class="circle"></div>
                                    <div style="position: absolute;left:
                                        90px;top: 50px;"><img src="img/u1.png"
                                            style="width: 37px;height: 37px;"></div>
                                    <div>
                                        <p class="li-p1"><strong>库表元数据管理</strong></p>
                                        <p class="li-p2">支持数据源元数据信息抽取，库表元数据管理，元数据本体映射，信息抽取，自定义SQL等功能</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <ul style="text-align: center;display: flex; margin-top:
                            30px; display: none;">
                            <li>
                                <div class="li-div">
                                    <div class="circle"></div>
                                    <div style="position: absolute;left:
                                        90px;top: 50px;">
                                        <img src="img/u1.png" style="width:
                                            37px;height: 37px;">
                                    </div>
                                    <div>
                                        <p class="li-p1"><strong>API市场</strong></p>
                                        <p class="li-p2">构建智能应用与服务，将传统政务信息、数据资源整合，打破程序壁垒、部门壁垒，实现数据共享</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="li-div">
                                    <div class="circle"></div>
                                    <div style="position: absolute;left:
                                        90px;top: 50px;"><img src="img/u1.png"
                                            style="width: 37px;height: 37px;"></div>
                                    <div>
                                        <p class="li-p1"><strong>应用市场</strong></p>
                                        <p class="li-p2">构建智能应用与服务，将传统政务信息、数据资源整合，打破程序壁垒、部门壁垒，实现数据共享</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="li-div">
                                    <div class="circle"></div>
                                    <div style="position: absolute;left:
                                        90px;top: 50px;"><img src="img/u1.png"
                                            style="width: 37px;height: 37px;"></div>
                                    <div>
                                        <p class="li-p1"><strong>数据资源目录</strong></p>
                                        <p class="li-p2">为政务领域构建出统一、集成的、稳定的数据模型奠定基础,同时提供业务元数据数据共享交换</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 热门服务 -->
                <div style="height: 487.33px; width: 100%;background-color:
                    #F4F4F4;">
                    <div style="width: 100%;">
                        <h3 style="text-align: center;font-size:
                            25px;padding-top: 40px;"><strong>热门服务</strong></h3>
                        <hr class="self-h3" />
                    </div>
                    <div style="width: 100%;text-align: center; cursor:
                        pointer;">
                        <ul>
                            <li class="li3" style="border-right-width:
                                0px;background-color: #4862fe;border: 2px solid
                                #4862fe;color: #fff;">
                                最新API
                            </li>
                            <li class="li3" style="border-right-width:
                                0px;border-left-width: 0px;">
                                热门API
                            </li>
                            <li class="li3" style="border-right-width: 0px;">
                                最新应用
                            </li>
                            <li class="li3">
                                热门应用
                            </li>
                        </ul>
                    </div>
                    <div style="width: 100%;height: 207px;">
                        <li style="width: 32%;height:200px;background-color:
                            #fff;list-style: none;margin-left: 50px;margin-top:
                            30px;">
                            <p style="padding-top: 20px;">
                                <img src="img/u6.png" style="width: 26px;height:
                                    26px;margin-left: 40px;margin-right: 10px;">
                                <span style="font-size: 16px;width: 64px;
                                    height: 24px;">卡片总数</span>
                            </p>
                            <p style="width:342px;height: 58px;background-color:
                                #F4F4F4;margin-left: 40px;margin-top: 20px;">
                                <span style="font-size:16px">卡片总数</span>
                            </p>
                            <p style="width:342px;height:26px;;margin-left:
                                40px;margin-top: 20px;">
                                <span>2021-6-25 16:40:20</span>
                                <img src="img/order.svg" style="height: 16px;
                                    width: 16px;float:right; cursor: pointer;">
                            </p>
                        </li>
                    </div>
                </div>
            </div>

            <div class="footer">
                <div style="display: flex;height: 150px; width: 100%;">
                    <div style="width: 45%;height: 90px;display:
                        inline-block;margin-left: 150px;">
                        <li style="list-style:none">
                            <h6 style="font-size: 16px;color:
                                #d6d6d6;margin-top: 30px;margin-left:
                                18px;margin-bottom: 20px;">联系我们</h6>
                        </li>
                        <li style="margin-bottom: 8px;">
                            <span style="font-size: 14px;color: #a3a4a7;">致电：13812345678</span>
                        </li>
                        <li>
                            <span style="font-size: 14px;color: #a3a4a7;">时间：9:00-18:00</span>
                        </li>
                    </div>
                    <div style="width: 45%;height: 90px;display:
                        inline-block;margin-left: 150px;">
                        <li style="list-style:none">
                            <h6 style="font-size: 16px;color:
                                #d6d6d6;margin-top: 30px;margin-left:
                                18px;margin-bottom: 20px;">声明</h6>
                        </li>
                        <li style="margin-bottom: 8px;">
                            <span class="footer-span">用户服务声明</span>
                        </li>
                        <li>
                            <span class="footer-span">隐私政策服务</span>
                        </li>
                    </div>
                </div>
                <div style="width: 80%;height: 1px;background-color:
                    #a3a4a7;margin: auto;"></div>
                <div>
                    <p style="font-size:14px;color:#a3a4a7;text-align:
                        center;margin-top: 20px;">演示租户</p>
                    <p style="font-size:14px; color:#a3a4a7;text-align:
                        center;"> 北京国双科技有限公司 | 京公安网备：贵 00001 </p>
                </div>
            </div>
        </div>
    </body>
    <script>
        const firstImg=document.getElementById("firstImg")
        const secondImg=document.getElementById("secondImg")
        const showFirst=document.getElementById("showFirst")
    
        function func(){
        
        firstImg.style.transform="translateX(-2000px) scale(1)"
        secondImg.style.transform="translateX(-2500px) scale(1)"
    }

    function funa(){
        showFirst.style.backgroundColor="black"
        firstImg.style.transform="translateX(-400px) scale(1)"
        secondImg.style.transform="translateX(10px) scale(1)"
    }
    </script>
    <style>
    .footer-span {
        font-size: 14px;
        color: #a3a4a7;
    }

    .footer-span:hover {
        font-size: 14px;
        color: #3498ff;
        cursor:pointer;
    }

    .out-transboxs {
        margin-top: 70px;
        width: 100%;
        position: absolute;
        display: flex;
        text-align: center;
        justify-content: center;
    }
    .self-h5 {
        font-size: 19px; 
        color: #FFFFFF;
    }
    .wrapper {
        width: 100%;
        height: 310px;
        margin-top: 30px;
    }
    .wrapper ul {
        height: 310px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        text-align: center;
        }

        .wrapper ul li {
            list-style: none;
            height: 310px;
            margin-right: 20px;
        }

        .wrapper ul li:hover {
            border: 1px solid #1c4eff;
            border-radius: 8px;
        }

        .wrapper ul li:hover .circle{
            background-color:#1c4eff;     
        }

        .wrapper ul li:hover .li-p1{
            color:#1c4eff;     
        }

        .wrapper ul li:hover .li-p2{
            color:#1c4eff;     
        }
    .footer { 
        background-color: #313131;
        width: 100%; 
        height: 246px; 
        bottom: 0px;
    }
    .li3 {
        display: inline; 
        font-size: 16px;
        padding-top: 7px;
        padding-right: 20px;
        padding-bottom: 7px;
        padding-left: 20px;
        border: 2px solid #8da6ff;
        text-align: center;
        color: #1C4EFF;
    }
    .li-p2 {
        width: 150;height: 130; font-size: 16px; padding-left: 15px;padding-right: 15px;
    }
    .li-p1 {
        font-size:18px; font-size:18px;margin-top: 120px;
    }
    .li-div {
        border-radius: 8px;
        border:1px solid rgb(245, 233, 233);
        height: 310px; 
        width: 220px; 
        position: relative;
    }
    /* .li2 {
        display: inline; 
        height: 310px; 
        width: 220px; 
        margin-right: 20px;
    } */
     .circle{
        position: absolute;
        margin-left: 77px;
        margin-top: 35px;
         width: 66px;      
         height: 66px;     
         background-color:#488AFB;     
         border-radius: 50%;      
         -moz-border-radius: 50%;      
         -webkit-border-radius: 50%;    
        }
    .self-h3 {
        text-align: center; 
        width: 55px;
        border-bottom: 2px solid #FFD33B;
        border-bottom-width:5px;
        border-top-width: 0px;
    }
    #firstTab{
        cursor:pointer;
        color: #0073E8;
    }
    #secondTab:hover{
        cursor:pointer;
        color: #0073E8;
    }
    .self-span {
        font-size: 32px; 
        color: white;
    }
    .self-div {
    margin: auto;
    padding-top: 122px;
    width: 80%;
    }

    div.transbox {
        padding-top: 15px;
        background-color:hsla(0,0%,100%,.1);
        width: 186px;
        height: 120px;
        float: left;
        text-align: center;
    }

    div.transbox:hover {
        background-color: hsla(0,0%,100%,.2);
    }

    div.transbox:hover .self-h5{
        color: #53eeff;
    }

    div.transbox:hover .self-span{
        color: #53eeff;
    }

    .self-li {   
        line-height: 24px;
        margin-left: 20px;
        display: inline-block;  
        color: #FFF;
        border-radius: 10px;
        padding: 2px 8px;
        cursor: pointer;
    }

    .self-li:hover {
        background-color: #777;
    }
.navbar {
    top: 0px;
    background-color: #2e43b7;
    margin-bottom: 0px;
    border: none;
    z-index:3;
}
.self-img {
    height: 540px;
}
.self-icon {
    font-size: 17px;
    padding-bottom: 24px;
    padding-top: 20px;
}

.dropbtn {
background-color: #2e43b7;
color: #eaeff4;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-bottom-width: 10px;
    margin-bottom: 0px;
    padding-bottom: 24px;
    padding-right: 30px;
    padding-left: 30px;
    padding-top: 20px;
}  

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #0B2161;
width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
text-align: center;
z-index: 1;
}

.dropright-content {
position: relative;
display: none;
background-color: #0B2161;
width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
text-align: center;
z-index: 1;
}

.self-button {
    position: flex;
    width: 120px;
    background: none;
    color: #eaeff4;
    border: none;
    padding: 12px 16px;
text-decoration: none;
display: block;
}

.self-button:hover {
background-color: #2e43b7;

} 

.self-button:hover .dropright-content {
display: block;
} 

.dropdown-content a {
color: #eaeff4;
padding: 12px 16px;
text-decoration: none;
display: block;

}  

.dropright-content a{
    color: #eaeff4;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropright-content a:hover{
    background-color: #2e43b7
}

.dropdown-content a:hover {
background-color: #2e43b7
} 

.dropdown:hover .dropdown-content {
display: block;
}  

.dropdown:hover .dropbtn {
background-color: #373ad4;
}

</style>
</html>
